<template>
  <view>
    <!-- 导航 -->
    <custom-nav></custom-nav>
    <view class="register-title">为了方便亲家联系您</view>
    <view class="sub-title">需要验证您的手机号</view>

    <image :src="urlConf + 'common/contact.svg'" class="contact"></image>

    <button class="r-btn" hover-class="hover-active" open-type="getPhoneNumber" @getphonenumber="getPhone">验证手机号开始相亲</button>

  </view>
</template>
 
<script setup>
import { fetchUserPhone } from "@/api/app";
import { urlConf } from "@/config/resource";
import { setItem } from "@/utils/storage";

const pathForm = ref("");
const getPhone = (e) => {
  const { code, errMsg, errno } = e.detail;
  if (errMsg.includes("fail user deny")) {
    uni.navigateTo({ url: "/subPages/register/verify" });
    return;
  }
  if (!code) return;

  fetchUserPhone({ code })
    .then((res) => {
      setItem("initGiftStatus", true);
      const len = getCurrentPages().length;
      nextTick(() => {
        uni.navigateBack({ delta: len });
      });
    })
    .catch((err) => {
      uni.showToast({
        title: "验证失败",
        icon: "none",
      });
      console.log("err", err);
    });
};

onLoad((options) => {
  pathForm.value = options.path;
});

onUnload(() => {
  setItem("lastPage", "subPages/contact/index");
});
</script>
 
<style lang='scss' scoped>
.register-title {
  @include registerTitle;
  padding: 100rpx 50rpx 20rpx;
}
.sub-title {
  font-weight: 800;
  padding: 0 50rpx;
  font-size: 48rpx;
}

.contact {
  width: 460rpx;
  height: 300rpx;
  margin: 160rpx 144rpx;
}

.r-btn {
  width: 610rpx;
  height: 140rpx;
  display: flex;
  align-items: center;
  justify-content: center !important;

  line-height: 140rpx;
  border-radius: 120rpx;
  background: #ff5c55;
  font-size: 40rpx;
  color: #fff;
  font-weight: bold;
  margin: 0 auto;
}
</style>